import { Context } from "./UseReducerFun"
import { useContext } from "react"
import ReducerThree from "./ReducerThree.jsx"
export default function ReducerOne() {
    const context = useContext(Context)
    const changeNumber = () => {
        context.dispatch({ type: "changeNum", payload: {num:20} })
    }
    function add() {
        context.dispatch({ type: 'add' })
    }

    return <div>
        <div>son1:{context.objRes.num}</div>
        {/* <div>son1:{context.themeColor}</div> */}
        <button onClick={add}>+1</button>
        <button onClick={() => context.dispatch({ type: 'del'})}>-1</button>
        <button onClick={changeNumber}>改变到20</button>
        <div>------</div>
        <h1>显示数组数据</h1>
        <ul>
            {
                context.objRes.arr.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
        <ReducerThree />
    </div>
}